<%--
  Created by IntelliJ IDEA.
  User: 12296
  Date: 2022/4/12
  Time: 8:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>学生列表</title>
    <script type="text/javascript" src="//apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            loadStudentData();
            $("#btn").click(function () {
                loadStudentData();
            })
        })
        function loadStudentData(){
            $.ajax({
                url:"student/query.do",
                type:"get",
                dataType:"json",
                success:function (data) {
                    //清除旧数据
                    $("#info").html("");
                    //增加旧数据
                    $.each(data,function (i, n) {
                        $("#info").append("<tr>")
                            .append("<td>"+n.id+"</td>")
                            .append("<td>"+n.name+"</td>")
                            .append("<td>"+n.age+"</td>")
                            .append("</tr>")
                    })
                }
            })
        }
    </script>
</head>
<body>
<div align="center" class="container row-8">
    <table class="table table-hover table-striped table-condensed">
        <thead>
            <tr>
                <td>序号：</td>
                <td>姓名：</td>
                <td>年龄：</td>
            </tr>
        </thead>
        <tbody id="info">

        </tbody>
    </table>
    <input type="button" id="btn" value="查询">
</div>
</body>
</html>
